<template>

			<div class="big">
				<br>
			<div class="mb16">
						<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
						<div class="ml1">
							<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input"/>
							<el-button type="primary"  style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
						</div>
					</div>
			 <div class="xiala" v-show="showXiala">
					    <form>
							<el-form-item label="计费项目" class="xz">
							      <el-select  placeholder="全部">
							      </el-select>
							</el-form-item>
							<el-form-item label="仪表所属" class="xz">
							      <el-select  placeholder="请选择计费类型">
							      </el-select>
							</el-form-item>
							<el-form-item label="仪表状态" class="xz">
							    <el-select  placeholder="全部">
							    </el-select>
							</el-form-item>
			
							<p style="width: 500px; height: 1px;">&nbsp;</p>
							<el-form-item label="最新抄表开始时间" class="xz" style="width: 800px;">
								<el-form-item>
								      <el-col :span="18">
								        <el-date-picker
								          type="date"
								          placeholder="开始"
								          style="width: 100%"
								        />
								      </el-col>
								    </el-form-item>
							</el-form-item>
							<el-form-item label="最新抄表结束时间" class="xz" style="width: 500px;">
								<el-form-item>
								      <el-col :span="18">
								        <el-date-picker
								          type="date"
								          placeholder="开始"
								          style="width: 100%"
								        />
								      </el-col>
								    </el-form-item>
							</el-form-item>
							<el-form-item label="抄表操作人" class="xz" style="width: 800px;">
							    <el-select  placeholder="请选择支付状态" style="width: 200px;right: 5px;">
							    </el-select>
							</el-form-item>
							
							
							<el-button class="btn1">重置</el-button><el-button class="btn2">查询</el-button>
						</form>
						<br />
					</div>
			<div class="all">
				<br />
				<el-button type="primary" class="add" @click="dialogFormVisible = true">添加仪表</el-button><br />
				
				
				<el-dialog v-model="dialogFormVisible" title="新增仪表" width="600">
				    <el-form :model="form">
				      
				      <el-form-item label="仪表所属" :label-width="formLabelWidth" style="width: 460px;">
				        <el-select v-model="form.region" placeholder="Please select a zone">
				          <el-option label="Zone No.1" value="shanghai" />
				          <el-option label="Zone No.2" value="beijing" />
				        </el-select>
				      </el-form-item>
					  
					  <el-form-item label="计费项目与标准" :label-width="formLabelWidth" style="width: 460px;">
					    <el-select v-model="form.region" placeholder="Please select a zone">
					      <el-option label="Zone No.1" value="shanghai" />
					      <el-option label="Zone No.2" value="beijing" />
					    </el-select>
					  </el-form-item>
					  
					  <el-form-item label="仪表初始读数" :label-width="formLabelWidth" style="width: 460px;">
					    <el-input v-model="form.name" autocomplete="off" />
					  </el-form-item>
					  
					  <el-form-item label="仪表倍率" :label-width="formLabelWidth" style="width: 460px;">
					    <el-input v-model="form.name" autocomplete="off" />
					  </el-form-item>
					  
					  <el-form-item label="仪表号" :label-width="formLabelWidth" style="width: 460px;">
					    <el-input v-model="form.name" autocomplete="off" />
					  </el-form-item>
					  
				    </el-form>
				    <template #footer>
				      <div class="dialog-footer">
				        <el-button @click="dialogFormVisible = false" class="btn">取消</el-button>
				        <el-button type="primary" @click="dialogFormVisible = false" class="btn">
				          确定
				        </el-button>
				      </div>
				    </template>
				  </el-dialog>
				  
				  
				<br />
				  <el-table :data="tableData" style="width: 100%" v-loading="loading">
				    <el-table-column fixed prop="date" label="计费项目" width="150" />
				    <el-table-column prop="name" label="费用编号" width="120" />
				    <el-table-column prop="state" label="账单所属" width="120" />
				    <el-table-column prop="city" label="面积" width="120" />
				    <el-table-column prop="address" label="销售状态" width="180" />
				    <el-table-column prop="zip" label="费用所属月" width="120" />
					<el-table-column prop="zip" label="费用起止时间" width="120" />
					<el-table-column prop="zip" label="应付金额" width="120" />
					<el-table-column prop="zip" label="退款金额" width="120" />
					<el-table-column prop="zip" label="状态" width="120" />
					<el-table-column prop="zip" label="生成时间" width="120" />
					<el-table-column prop="zip" label="支付方式" width="120" />
					<el-table-column prop="zip" label="支付时间" width="120" />
					<el-table-column prop="zip" label="计费类型" width="120" />
					<el-table-column prop="zip" label="生成操作人" width="120" />
					<el-table-column prop="zip" label="收款操作人" width="120" />
					<el-table-column prop="zip" label="费用备注" width="120" />
				    <el-table-column fixed="right" label="操作" min-width="120">
				      <template #default>
				        <el-button link type="primary" size="small" @click="tableClick">
				          查看
				        </el-button>
				        <el-button link type="primary" size="small">
							<el-dropdown>
							    <span class="el-dropdown-link">
							      ...
							      <el-icon class="el-icon--right">
							        <arrow-down />
							      </el-icon>
							    </span>
							    <template #dropdown>
							      <el-dropdown-menu>
							        <el-dropdown-item>Action 1</el-dropdown-item>
							        <el-dropdown-item>Action 2</el-dropdown-item>
							        <el-dropdown-item>Action 3</el-dropdown-item>
							      </el-dropdown-menu>
							    </template>
							  </el-dropdown>
						</el-button>
				      </template>
				    </el-table-column>
				  </el-table>
				
			</div>
			</div>

</template>



<script lang="ts" setup>
import { ref,reactive } from 'vue'

import { ArrowDown } from '@element-plus/icons-vue'



const loading = ref(true)
setTimeout(() => {
  loading.value = false;
}, 3500);



const tableClick = () => {
  console.log('click')
}



const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]

const showXiala = ref(false);


const showClick = () => {
  console.log("aaa");
  showXiala.value = !showXiala.value;  
};





const dialogFormVisible = ref(false)
const formLabelWidth = '140px'


const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


</script>

<style>



.add{
	position: relative;
	right: 600px;
	top: 0px;
	background-color: #00C36D;
	height: 40px;
	width: 100px;
	border: 0px solid;
}
.all{
	width: 1370px;
	border: 2px solid gainsboro;
	height: 650px;
	border-radius: 10px; 
	background-color: white;
	
}





.xiala {
		background-color: white;
		width: 1340px;
		height: 320px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
		border: 2px solid gainsboro;
		border-radius: 10px; 
	}
	.xz{
		width: 300px;
		float: left;
		margin-bottom: 0;
		margin-right: 32px;
		height: 56px;
		align-items: center;
		text-align: left;
	}
	.text-center{
		text-align: center;
	}
	.btn1{
		position: relative;
		bottom: -230px;
		right:1000px;
		width: 100px;
		height: 40px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
		font-size: 14px;
		padding: 10px;
	}
	.btn2{
		position: relative;
		bottom: -230px;
		right:980px;
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
	}
.gjsx{
		background-color: white;
		padding: 10px 15px;
		color: #00C36D;
		width: 146px;
		height: 40px;
	}
	.mb16{
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
		width: 1315px;
	}
	.ml1{
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;
	}
	.el-input{
		width: 200px;
	}
	.big{
		background-color: #f5f5f5;
	}
	
	.example-showcase .el-dropdown-link {
	  cursor: pointer;
	  color: var(--el-color-primary);
	  display: flex;
	  align-items: center;
	}
	.example-showcase .el-loading-mask {
	  z-index: 1;
	}
	.btn{
		background-color: #00C36D;
		height: 40px;
		width: 100px;
		color: white;
	}
</style>

